<template>
  <div class="con">
    <LargeScreen v-show="content" :content="content" :key="largeScreenComponentsKey"/>
  </div>
</template>

<script setup name="DataScreen">
import { getLargeScreen } from "@/api/datascreen/largeScreen";
import LargeScreen from '@/components/LargeScreen/index.vue'

const route = useRoute();
const largeScreenId = `${route.params.largeScreenId}`
const content = ref(null)
const largeScreenComponentsKey = ref(0)

function init(){
  if(largeScreenId){
    getLargeScreen(largeScreenId).then(response => {
      content.value = response.data.content
      largeScreenComponentsKey.value++
    })
  }
}

init()
</script>

<style lang='scss' scoped>
  .con{
    width: calc(100vw);
    height: calc(100vh);
  }
</style>
